<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!doctype html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>

    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <!--  PAGINATION plugin -->
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

    <script type="text/javascript" src="jquery/crm/ActivityPagination.js"></script>
    <script type="text/javascript" src="jquery/crm/jquery.pagination.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/crm/pagination.css">


    <script type="text/javascript">
        $(function () {
            //定义全局变量方便引用
            window.pageNum = 1;
            window.pageSize = 10;
            //执行分页，生成页面效果，任何时候调用这个函数都会重新加载页面
            generateActivityPage();
            //给所有的日期输入框添加日期插件
            $(".mydate").datetimepicker({
                language: 'zh-CN',//语言
                format: 'yyyy-mm-dd',//日期格式
                minView: 'month',//日期选择器上最小能选择的日期的视图
                initialDate: new Date(),// 日历的初始化显示日期，此处默认初始化当前系统时间
                autoclose: true,//选择日期之后，是否自动关闭日历
                todayBtn: true,//是否显示当前日期的按钮
                clearBtn: true,//是否显示清空按钮
                // container:"#editActivityModal"
            });
            //给查询按钮添加单机事件
            $("#queryActivityBtn").click(function () {
                generateActivityPage();
            });

            //给创建按钮添加点击事件
            $("#createActivityBtn").click(function () {
                //重置创建市场活动的表单
                $("#activityForm")[0].reset();
                //打开模态框
                $("#createActivityModal").modal("show")
            })
            //给模态框保存按钮添加事件
            $("#saveCreateActivityBtn").click(function () {
                //获取参数
                var owner = $("#create-marketActivityOwner").val();
                var name = $("#create-marketActivityName").val();
                var startDate = $("#create-startDate").val();
                var endDate = $("#create-endDate").val();
                var cost = $("#create-cost").val();
                var description = $("#create-description").val();

                //判断名称是否为空
                if (name == null || name == "") {
                    layer.msg("名称不能为空");
                    return false;
                }
                //判断日期是否合法
                if (startDate == null || startDate == "") {
                    layer.msg("开始日期不能为空");
                    return false;
                }
                if (endDate == null || endDate == "") {
                    layer.msg("结束日期不能为空");
                    return false;
                }
                if (startDate > endDate) {
                    layer.msg("开始日期不能大于结束日期");
                    return false;
                }
                //判断cost是否合法,非负浮点数
                var regExp = /^\d+(\.\d+)?$/;
                if (!regExp.test(cost)) {
                    layer.msg("成本只能是非负整数");
                    return;
                }

                $.ajax({
                    url: "workbench/actity/createActivity.do",
                    type: "post",
                    data: {
                        "owner": owner,
                        "name": name,
                        "startDate": startDate,
                        "endDate": endDate,
                        "cost": cost,
                        "description": description
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.successCode == "0") {
                            layer.msg("success" + data.message)
                            //模态窗口不关闭
                            $("#createClueModal").modal("show");
                        } else {
                            //关闭模态框
                            $("#createActivityModal").modal("hide")
                            layer.msg("保存成功");
                            window.pageNum = 1;
                            generateActivityPage();
                        }

                    },
                    error: function (data) {
                        layer.msg("error" + "保存失败");
                    }
                })

            });

            //给修改按钮添加点击事件
            $("#editActivityBtn").click(function () {

                //必须选中一个才能修改
                var cks = $(".itemBox:checked");
                if (cks.length == 0) {
                    layer.msg("请选择要修改的数据");
                    return false;
                }
                if (cks.length > 1) {
                    layer.msg("只能选择一条数据进行修改");
                    return false;
                }
                if (cks.length == 1) {
                    var id = cks.val();
                    //发起ajax请求
                    $.ajax({
                        url: "workbench/actity/getActivity.do",
                        type: "post",
                        data: {"id": id},
                        dataType: "json",
                        success: function (response) {
                            if (response.successCode == "0") {
                                layer.msg("success" + response.message)
                            } else {
                                $("#edit-id").val(response.data.id);
                                //将查询出来的owner和下拉框中的value比较，相等则将该选项的selected属性置位true
                                var ops = $("#edit-marketActivityOwner option");
                                var owner = response.data.owner;
                                $.each(ops, function (index, item) {
                                    if (owner == item.value) {
                                        $(this).prop("selected", true)
                                    }
                                });

                                $("#edit-marketActivityName").val(response.data.name);
                                $("#edit-startDate").val(response.data.startDate);
                                $("#edit-endDate").val(response.data.endDate);
                                $("#edit-cost").val(response.data.cost);
                                $("#edit-description").val(response.data.description);
                                //回显完数据，再打开模态框
                                $("#editActivityModal").modal("show");

                            }

                        },
                        error: function (response) {
                            layer.msg("error" + "修改失败");
                        }
                    });

                }

//发起ajax请求进行回显数据

            })
            //给模态框保存按钮添加事件
            $("#saveEditActivityBtn").click(function () {
                //获取参数
                var id = $("#edit-id").val();
                var owner = $("#edit-marketActivityOwner").val();
                var name = $("#edit-marketActivityName").val();
                var startDate = $("#edit-startDate").val();
                var endDate = $("#edit-endDate").val();
                var cost = $("#edit-cost").val();
                var description = $("#edit-description").val();

                //判断名称是否为空
                if (name == null || name == "") {
                    layer.msg("名称不能为空");
                    return false;
                }
                //判断日期是否合法
                if (startDate == null || startDate == "") {
                    layer.msg("开始日期不能为空");
                    return false;
                }
                if (endDate == null || endDate == "") {
                    layer.msg("结束日期不能为空");
                    return false;
                }
                if (startDate > endDate) {
                    layer.msg("开始日期不能大于结束日期");
                    return false;
                }
                //判断cost是否合法,非负浮点数
                var regExp = /^\d+(\.\d+)?$/;
                if (!regExp.test(cost)) {
                    layer.msg("成本只能是非负整数");
                    return;
                }

                $.ajax({
                    url: "workbench/actity/changeActivity.do",
                    type: "post",
                    data: {
                        "id": id,
                        "owner": owner,
                        "name": name,
                        "startDate": startDate,
                        "endDate": endDate,
                        "cost": cost,
                        "description": description
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.successCode == "0") {
                            layer.msg("success" + data.message)
                        } else {
                            //关闭模态框
                            $("#editActivityModal").modal("hide")
                            layer.msg("修改成功");
                            generateActivityPage();
                        }

                    },
                    error: function (data) {
                        layer.msg("error" + "修改失败");
                    }
                })

            });

            //全选全不选
            $("#checkAll").click(function () {
                $(".itemBox").prop("checked", this.checked);
            });
            //给动态的复选框添加点击事件
            $("#tBody").on("click", ".itemBox", (function () {
                if ($(".itemBox").length == $(".itemBox:checked").length) {
                    $("#checkAll").prop("checked", true);
                } else {
                    $("#checkAll").prop("checked", false);
                }
            }));

            //给删除按钮添加点击事件
            $("#deleteActivityBtn").click(function () {
                var cks = $(".itemBox:checked");
                if (cks.length == 0) {
                    layer.msg("请选择要删除的数据");
                    return false;
                }
                var arr = [];
                //获取要删除的id名和
                for (var i = 0; i < cks.length; i++) {
                    var id = cks[i].value;
                    var name = $(cks[i]).parent().next().children().text();
                    arr.push({
                        "id": id,
                        "name": name
                    })
                }
                showConfirmModal(arr);

            });
            //给模态框删除按钮添加事件
            $("#modalDeleteBtn").click(function () {
                //将请求数组转为json数据
                var ids = JSON.stringify(activityIdsArray);
                //关闭模态框
                $("#deleteModal").modal("hide");
                //发起ajax请求删除数据
                $.ajax({
                    url: "workbench/actity/dropActivity.do",
                    type: "post",
                    data: ids,
                    dataType: "json",
                    contentType: "application/json;charset=UTF-8",
                    success: function (data) {
                        if (data.successCode == "0") {
                            layer.msg("success" + data.message)
                        } else {
                            //关闭模态框
                            layer.msg("删除成功");
                            generateActivityPage();
                        }

                    },
                    error: function (data) {
                        layer.msg("error" + "删除失败");
                    }
                })
            });

            //选择页面中显示数据的数据量
            $("#pageSizeSelect").change(function () {
                pageSize = $(this).val();
                generateActivityPage();
            });

            //给批量导出按钮添加事件
            $("#exportActivityAllBtn").click(function () {
                window.location.href = "workbench/actity/exportActivityAll.do";
            });

            //给选择导出按钮添加事件
            $("#exportActivityXzBtn").click(function () {
                var cks = $(".itemBox:checked");
                if (cks.length == 0) {
                    layer.msg("请选择要导出的数据")
                    return false;
                }
                var idsArr = "";
                $.each(cks, function (index, item) {
                    idsArr += "ids=" + item.value + "&";
                });
                //去掉最后一个&
                idsArr = idsArr.substr(0, idsArr.length - 1);
                window.location.href = "workbench/actity/exportActivitySelective.do?" + idsArr;

            });

            //给上传数据模板添加事件
            $("#exportActivityTemplateBtn").click(function () {
                window.location.href = "workbench/actity/exportActivityTemplate.do";
            });
            //给导入文件按钮添加事件
            $("#importActivityListBtn").click(function () {
                //显示导入模态框
                $("#importActivityModal").modal("show");
            });
            //给模态框导入按钮添加事件
            $("#importActivityBtn").click(function () {
                //收集参数
                var activityFileName = $("#activityFile").val();//dad.sad.sad.xls
                //表单验证
                var suffix = activityFileName.substr(activityFileName.lastIndexOf(".") + 1).toUpperCase();//xls Xls XLS xLS .....
                if (suffix != 'XLS') {//XLS
                    layer.msg("仅支持后缀名为XLS的文件");
                    return;
                }
                var activityFile = $("#activityFile")[0].files[0];
                if (activityFile.size > 5 * 1024 * 1024) {
                    layer.msg("文件大小不超过5MB");
                    return;
                }

                //发送请求,创建表单对象,填充文件数据
                var formData=new FormData();
                formData.append("activityFile",activityFile);
                $.ajax({
                    url: 'workbench/activity/importActivity.do',
                    data: formData,
                    type: 'post',
                    dataType: 'json',
                    processData:false,//默认请求下，ajax每次向后台发送请求，都会把多有的参数统一转化成字符串，设置processData=false，可以阻止这种行为
                    contentType:false,//默认请求下，ajax每次向后台发送请求，都会把所有的参数统一进行urlencoded编码，设置contentType=false，可以阻止这种行为
                    success: function (data) {
                        if (data.successCode == "1") {
                            //提示导入条数
                            layer.msg("成功导入" + data.data + "条记录");
                            //关闭模态窗口
                            $("#importActivityModal").modal("hide");
                            //刷新市场活动列表，显示第一页数据,保持每页显示条数不变
                            generateActivityPage();
                        } else {
                            //提示信息
                            layer.msg(data.message);
                            //模态窗口不关闭
                            $("#importActivityModal").modal("show");
                        }
                    },
                    error: function (data) {

                        layer.msg("系统繁忙")
                    }

                });

            });


        });

    </script>
</head>
<body>

<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="query-name">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="query-owner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control mydate" type="text" id="query-startDate"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control mydate" type="text" id="query-endDate">
                    </div>
                </div>

                <button id="queryActivityBtn" type="button" class="btn btn-default">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button id="createActivityBtn" type="button" class="btn btn-primary"><span
                        class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button id="editActivityBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button id="deleteActivityBtn" type="button" class="btn btn-danger"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>
            <div class="btn-group" style="position: relative; top: 18%;">
                <button id="importActivityListBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-import"></span> 上传列表数据（导入）
                </button>
                <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）
                </button>
                <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）
                </button>
                <button id="exportActivityTemplateBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 上传列表数据（模板导出）
                </button>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="checkAll"/></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="tBody">
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="2">
                        <span>请选择每页数据的数量</span><select id="pageSizeSelect" class="form-control" style="width: 80px;"
                                                       class="selectedOption">
                        <option value="10" selected>10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                    </select>
                    </td>
                    <td colspan="3">
                        <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                    </td>
                </tr>

                </tfoot>
            </table>
        </div>


    </div>

</div>

<%@include file="createActivityModal.jsp" %>
<%@include file="editActivityModal.jsp" %>
<%@include file="importActivityModal.jsp" %>
<%@include file="confirmModal.jsp" %>

</body>
</html>